import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';

import {
    Descriptions,
    Modal,
} from 'antd';
import { request } from 'umi';
import { ProTable, } from '@ant-design/pro-components';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
const ConfModal = (props: any, refs: any) => {
    const [code, setCode] = useState('');
    const actionRef = useRef<ActionType>();
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [data, setData] = useState({});
    const [measureClassData, setmeasureClassData] = useState([]);
    const [menuNamem, setmenuName] = useState('');
    //显示弹窗
    const showModal = () => {
        setIsModalVisible(true);
    };
    //取消
    const handleCancel = () => {
        setIsModalVisible(false);
        setCode('');
        setmeasureClassData([]);

        props.callback && props.callback();
    };
    //确定
    const handleOk = () => {
        request('/sys/group/' + code + '/menu', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            data: measureClassData,
        }).then((res) => {
            // setData(res?.data);
            handleCancel();
        });
    };

    const getDetail = (id: any) => {
        request('/sys/group/' + id + '/menu', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
            data: {
                id,
            },
        }).then((res) => {
            let list = res?.data;
            let arr = list.map((item: any) => {
                return item.groupId
            })
            setmeasureClassData(arr);
            // setData(res?.data);
            showModal();
        });

    };
    useImperativeHandle(refs, () => ({
        init: (id: any, record: any) => {
            setCode(id);
            getDetail(id);
        },
    }));
    const columns: ProColumns<businessReportItem>[] = [
        {
            dataIndex: 'index',
            valueType: 'indexBorder',
            width: 48,
        },
        {
            title: '卡片名称',
            align: "center",
            key: 'title',
            dataIndex: 'title',
            hideInSearch: true,
        },
        {
            title: '卡片适用设备端',
            align: "center",
            key: 'sourceType',
            dataIndex: 'sourceType',
            hideInSearch: true,
        },
        {
            title: '描述',
            align: "center",
            key: 'remark',
            dataIndex: 'remark',
            // hideInSearch: true,
        },
    ];
    return (
        <Modal
            title={code === '' ? '新增' : '编辑'}
            visible={isModalVisible}
            onOk={handleOk}
            onCancel={handleCancel}
            centered
            width={1000}
            destroyOnClose
            maskClosable={false}
            bodyStyle={{
                height: window.innerHeight - 150,
                overflowY: 'auto',
            }}
        >
            <div style={{ padding: '0 24px', marginBottom: '15px' }}>
                <h3>菜单：{menuNamem}</h3>
            </div>

            <ProTable
                actionRef={actionRef}
                columns={columns}
                search={false}
                pagination={false}
                options={false}
                scroll={{ y: window.innerHeight - 300 }}
                rowKey="groupId"
                rowSelection={{
                    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
                        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                        setmeasureClassData(selectedRowKeys);
                    },
                    selectedRowKeys: measureClassData,
                }}
                // params 是需要自带的参数
                // 这个参数优先级更高，会覆盖查询表单的参数
                request={async (
                    // 第一个参数 params 查询表单和 params 参数的结合
                    // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
                    params: T & {
                        pageSize: number;
                        //current: number;
                    },
                    sort,
                    filter,
                ) => {
                    // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
                    // 如果需要转化参数可以在这里进行修改
                    const response: any = await request(`/sys/group/?bussType=${props.bussType}&sourceType=`, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        data: {

                        },
                    });
                    return {
                        data: response?.data,
                        // success 请返回 true，
                        // 不然 table 会停止解析数据，即使有数据
                        success: true,
                        // 不传会使用 data 的长度，如果是分页一定要传
                        total: response?.data?.totalCount,
                        //message.success(res?.meta?.msg);
                    };
                }}
            />
        </Modal>
    );
};
const ConfModalCom = forwardRef(ConfModal);
export default ConfModalCom;
